<template>
  <div>
    <div class="wrap" v-if="innerWidth > 500">
      <div class="fixed u-flex">
        <img class="hand img" src="@/image/index/back.png" @click="back">
        <img src="@/image/russia/logo2.png" class="logo">
        俄数通
      </div>
      <div class="fixed_hei"></div>
      <div class="listBg u-flex">
        <div class="cont">行业调研报告</div>
      </div>
      <div class="cont cont">
        <div class="modular100 modular_bg">
          <div v-for="item in list" class="u-flex in_it hand" @click="newClick(item)">
            <div class="it_img">
              <img :src="item.image_url" alt="" />
            </div>
            <div class="it_ri u-flex">
              <div class="it_data">
                <div class="it_year">{{ item.time.substring(0, 4) }}</div>
                <div class="it_day">
                  {{ item.time.substring(5, 8) }}{{ item.time.substring(8, 10) }}
                </div>
              </div>
              <div class="it_box">
                <div class="it_big">{{ item.title }}</div>
                <div class="it_sma webkit-line-clamp-two">
                  {{ item.desc }}
                </div>
              </div>
            </div>
          </div>

          <div v-if="list.length > 0" class="pagination">
            <a-pagination :current="pagination.current" :pageSize="pagination.pageSize" :locale="locale"
              :total="pagination.total" :show-quick-jumper="true" @change="handleTableChange" />
          </div>
        </div>
      </div>
    </div>
    <div v-else class="pho">
      <PhoHead topIndex="det"></PhoHead>
      <img src="@/image/russia/report/head.png" class="top">
      <div class="white">
        <div v-for="item in list" class="u-flex in_it hand" @click="newClick(item)">
          <div class="it_img">
            <img :src="item.image_url" alt="" />
          </div>
          <div class="it_ri">
            <div class="it_big">{{ item.title }}</div>
            <div class="it_sma webkit-line-clamp-three">
              {{ item.desc }}
            </div>
            <div class="it_data">
              {{ item.time.substring(0, 4) }}-{{ item.time.substring(5, 8) }}{{ item.time.substring(8, 10) }}
            </div>
          </div>
        </div>
        <div v-if="list.length > 0" class="pagination">
          <a-pagination :current="pagination.current" :pageSize="pagination.pageSize" :locale="locale"
            :total="pagination.total" :show-quick-jumper="true" @change="handleTableChange" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
export default {
  data() {
    return {
      innerWidth: 0,

      list: [],
      // 分页
      pagination: {
        total: 0, // 总数据量
        current: 1, // 当前页码
        pageSize: 5, // 每页显示条数
        showQuickJumper: true, // 是否可以快速跳转
      },
      locale: {
        items_per_page: "每页条数：",
        jump_to: "跳转至",
        page: "页",
        jump_to_confirm: "确认跳转",
        next_page: "下一页",
        prev_page: "上一页",
        first_page: "首页",
        last_page: "尾页",
      },
    };
  },
  created() {
    this.innerWidth = window.innerWidth;
    this.store = useStore();
    this.pagination.current = Number(sessionStorage.getItem('categoryPage') || 1)
  },
  mounted() {
    // 列表数据
    this.listFn();
  },
  methods: {
    listFn() {
      this.store
        .dispatch("home/articleApi", {
          page: this.pagination.current,
          per_page: this.pagination.pageSize,
          categoryId: 3,
        })
        .then((res) => {
          if (res.status == 200) {
            this.list = res.data.list.data;
            this.pagination.total = res.data.list.total;
          }
        });
    },
    // 处理表格分页变化的事件
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination;
      this.listFn(); //采购商品列表
    },
    newClick(item) {
      this.$router.push({
        path: "/russia/detail",
        query: { id: item.article_id },
      });
      sessionStorage.setItem('categoryPage', this.pagination.current)//存分页条数
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
// 分页
::v-deep .ant-pagination .ant-pagination-item {
  border-radius: 3px;
  border: 1px solid #ccc;
  /* 设置每一项的边框 */
}

::v-deep .ant-pagination-item-active {
  border: 1px solid #1677ff !important;
  /* 设置选中的边框 */
}

@media screen and (max-width: 1920px) {
  .listBg {
    font-size: 40px !important;
  }
}

@media screen and (max-width: 1650px) {
  .cont {
    width: 1240px !important;
  }

  .listBg {
    font-size: 36px !important;
  }
}

@media screen and (max-width: 1500px) {
  .cont {
    width: 1100px !important;
  }

  .listBg {
    font-size: 34px !important;
  }

  .fixed {
    font-size: 16px !important;


    .img {
      width: 11px !important;
    }

    .logo {
      width: 40px !important;
      margin: 0 16px !important;
    }
  }

  .modular100 {
    padding: 10px 6% 30px !important;

    .in_it {
      .it_img {
        width: 270px !important;
      }

      .it_ri {
        .it_data {
          padding: 0 36px 0 72px !important;
          margin-right: 25px !important;

          .it_year {
            font-size: 30px !important;
          }
        }

        .it_box {
          padding-right: 30px !important;

          .it_big {
            font-size: 14px !important;
            margin-bottom: 14px !important;
          }

          .it_sma {
            font-size: 13px !important;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1366px) {
  .cont {
    width: 1000px !important;
  }


  .fixed {
    font-size: 14px !important;


    .img {
      width: 10px !important;
    }

    .logo {
      width: 35px !important;
      margin: 0 14px !important;
    }
  }


  .listBg {
    font-size: 32px !important;
  }

  .modular100 {
    padding: 5px 6% 30px !important;

    .in_it {
      .it_img {
        width: 240px !important;
      }

      .it_ri {
        .it_data {
          .it_year {
            font-size: 28px !important;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1250px) {
  .cont {
    width: 900px !important;
  }

  .listBg {
    font-size: 30px !important;
  }

  .modular100 {
    padding: 5px 6% 30px !important;

    .in_it {
      margin-top: 20px;

      .it_img {
        width: 200px !important;
        aspect-ratio: 16/9.7 !important;
      }

      .it_ri {
        .it_data {
          padding: 0 25px 0 60px !important;
          margin-right: 20px !important;
          height: 80px !important;

          .it_year {
            font-size: 27px !important;
          }

          .it_day {
            font-size: 14px !important;
            margin-top: 4px;
          }
        }

        .it_box {
          padding-right: 20px !important;

          .it_big {
            font-size: 13px !important;
            margin-bottom: 12px !important;
          }

          .it_sma {
            font-size: 12px !important;
            line-height: 17px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1150px) {
  .cont {
    width: 800px !important;
  }

  .listBg {
    font-size: 28px !important;
  }

  .modular100 {
    padding: 5px 6% 25px !important;

    .in_it {
      .it_img {
        width: 180px !important;
      }

      .it_ri {
        .it_data {
          padding: 0 20px 0 55px !important;
          margin-right: 15px !important;
          height: 75px !important;

          .it_year {
            font-size: 24px !important;
          }

          .it_day {
            font-size: 13px !important;
            margin-top: 3px !important;
          }
        }

        .it_box {
          .it_big {
            font-size: 12px !important;
            margin-bottom: 10px !important;
          }

          .it_sma {
            font-size: 11px !important;
          }
        }
      }
    }

    .pagination {
      padding-top: 25px !important;
    }
  }
}

@media screen and (max-width: 1000px) {
  .cont {
    width: 700px !important;
  }

  .listBg {
    font-size: 24px !important;
  }

  .modular100 {
    padding: 1px 6% 25px !important;

    .in_it {
      margin-top: 16px !important;

      .it_img {
        width: 150px !important;
        aspect-ratio: 16/9.8 !important;
      }

      .it_ri {
        .it_data {
          height: 65px !important;

          .it_year {
            font-size: 22px !important;
          }

          .it_day {
            font-size: 12px !important;
          }
        }

        .it_box {
          .it_big {
            font-size: 11px !important;
            margin-bottom: 8px !important;
          }

          .it_sma {
            font-size: 10px !important;
            line-height: 16px !important;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 900px) {
  .cont {
    width: 650px !important;
  }

  .listBg {
    font-size: 22px !important;
  }

  .modular100 {
    padding: 1px 5% 25px !important;

    .in_it {
      .it_ri {
        .it_data {
          padding: 0 20px 0 45px !important;

          .it_year {
            font-size: 20px !important;
          }

          .it_day {
            font-size: 11px !important;
          }
        }

        .it_box {
          padding-right: 10px !important;
        }
      }
    }
  }
}

.wrap {
  min-height: 100vh;
  background: #f7f8fa;

  .fixed {
    width: 100%;
    position: fixed;
    font-size: 20px;
    color: #333;
    height: 60px;
    line-height: 60px;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 0 56px;
    background-color: #fff;
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.16);

    .img {
      width: 13px;
      margin-right: 6px;
    }

    .logo {
      width: 45px;
      margin: 0 20px;
    }
  }

  .fixed_hei {
    height: 60px;
  }

  .listBg {
    width: 100%;
    aspect-ratio: 16/4;
    font-size: 50px;
    color: #fff;
    background-image: url("../../../image/russia/listBg.png");
    /* 背景图片覆盖整个元素 */
    background-size: 100% 100%;
    /* 背景图片不重复 */
    background-repeat: no-repeat;
    /* 背景图片居中 */
    background-position: center;
  }

  .cont {
    width: 1440px;
    margin: 0 auto;

    .modular_bg {
      background-color: #fff;
      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    }

    .modular100 {
      width: 100%;
      margin-top: 20px;
      padding: 17px 6% 40px;

      .in_it {
        width: 100%;
        background: #fafafa;
        margin-top: 20px;
        box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);

        .it_img {
          width: 300px;
          aspect-ratio: 16/10.3;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .it_ri {
          flex: 1;

          .it_data {
            padding: 0 48px 0 80px;
            margin-right: 30px;
            height: 90px;
            border-right: 1px solid #e6e6e6;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;

            .it_year {
              font-size: 32px;
              color: #333;
            }

            .it_day {
              font-size: 16px;
              color: #666;
              margin-top: 4px;
            }
          }

          .it_box {
            padding-right: 100px;

            .it_big {
              color: #333;
              font-size: 16px;
              margin-bottom: 15px;
            }

            .it_sma {
              color: #333;
              font-size: 14px;
            }
          }
        }
      }

      .pagination {
        text-align: right;
        padding-top: 30px;
      }
    }
  }
}

// 手机端
.pho {

  .top {
    width: 100%;
  }

  .white {
    padding: 0px 15px 0;
    box-shadow: 0px 5px 6px -4px rgba(0, 0, 0, 0.16);

    .in_it {
      width: 100%;
      background: #fafafa;
      margin-top: 16px;
      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);

      .it_img {
        width: 120px;
        height: 110px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .it_ri {
        padding: 8px 12px;
        color: #333;
        height: 110px;
        width: calc(100% - 120px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .it_big {
          font-size: 14px;
          font-weight: bold;
        }

        .it_sma {
          font-size: 12px;
          line-height: 18px;
        }

        .it_data {
          font-size: 12px;
          text-align: right;
        }
      }
    }

    .pagination {
      text-align: center;
      padding: 30px 0;
    }
  }
}
</style>